<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="/WEB-INF/views/header.jsp" %>
    <title>微学习</title>
    <%--<link rel="stylesheet" type="text/css" href="${base}/css/index.css" />--%>
    <%--<link rel="stylesheet" type="text/css" href="${base}/plugins/bootstrap4/css/bootstrap.min.css" />--%>

    <link rel="stylesheet" type="text/css" href="${base}/plugins/bootstrap-validator/bootstrapValidator.css"/>
    <script src="${base}/plugins/bootstrap-validator/bootstrapValidator.js"></script>

    <%--bootstrap file--%>
    <link href="${base}/plugins/bootstrap4/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
          media="all" rel="stylesheet" type="text/css"/>
    <link href="${base}/plugins/bootstrap4/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="${base}/plugins/bootstrap4/js/fileinput.js" type="text/javascript"></script>
    <script src="${base}/plugins/bootstrap4/themes/fa/theme.js" type="text/javascript"></script>

    <script src="${base}/plugins/jquery.serializejson.js"></script>

</head>
<body>


<div class="d-flex flex-row" style="background-color: #eeeeee">
    <div class="container bg-light p-3">
        <div>
            <span></span>
            <h3 class="p-3">个人中心</h3>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#home">密码修改</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#menu1">基本信息</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#menu2">头像</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <!-- 修改密码 start -->
                <div id="home" class="container tab-pane active bg-light col-md-12"><br>
                    <form id="pwd-form" class="form-horizontal" role="form">
                        <div class="form-inline row m-2">
                            <div class="col-md-2">
                                原密码:
                            </div>
                            <input type="password" class="form-control" id="pwd" name="pwd" placeholder="原密码">
                        </div>
                        <div class="form-inline row m-2">
                            <div class="col-md-2">
                                新密码:
                            </div>
                            <input type="password" class="form-control" id="rePwd" name="rePwd" placeholder="新密码">
                        </div>
                        <div class="form-inline row m-2">
                            <div class="col-md-2">
                                确认密码:
                            </div>
                            <input type="password" class="form-control" id="confirmPwd" name="confirmPwd"
                                   placeholder="确认密码">
                        </div>
                        <div>
                            <button class="btn btn-success" type="button" style="width: 100px;" id="btn-update">修改
                            </button>
                        </div>
                    </form>

                </div>
                <!-- 修改密码 end -->

                <!-- 基本信息 start -->
                <div id="menu1" class="container tab-pane fade com-md-12"><br>
                    <h3>基本信息</h3>
                    <form id="updateTeacherForm" method="post">
                        <div class="form-group">
                            <label for="teName">姓名:</label>
                            <input type="text" class="form-control col-md-6" id="teName" value="${teacher.te_name}"
                                   name="te_name">
                        </div>
                        <div class="form-group">
                            <label for="loginName">登录名:</label>
                            <input type="text" class="form-control col-md-6" id="loginName"
                                   value="${teacher.te_login_name}" name="te_login_name">
                        </div>
                        <div class="form-group">
                            <label for="gender">性别:</label>
                            <select class="form-control col-md-6" id="gender" name="te_gender">
                                <option value="1" ${teacher.te_gender == 1?'selected':''}>男</option>
                                <option value="2" ${teacher.te_gender == 2?'selected':''}>女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="age">年龄:</label>
                            <input type="text" class="form-control col-md-6" id="age" value="${teacher.te_age}"
                                   name="te_age">
                        </div>
                        <div class="form-group">
                            <label for="school">学校:</label>
                            <select class="form-control col-md-6" id="school" name="school.school_id">
                                <option value="">全部</option>
                                <c:forEach items="${schools}" var="s">
                                    <option value="${s.school_id}" ${s.school_id == teacher.school.school_id?'selected':''}>${s.school_name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <button type="button" id="updateTeacher" class="btn btn-primary">确认修改</button>
                    </form>
                </div>
                <!-- 基本信息 end -->

                <div id="menu2" class="container tab-pane fade" style="margin-bottom: 200px;"><br>
                    <h3>我的头像</h3>
                    <div id="updateImgDialog" style="width:400px; height: 280px;">
                        <form enctype="multipart/form-data" method="post" action="${base}/teacher/uploadHeadImg">
                            <div class="form-group">
                                <div class="file-loading">
                                    <input id="file-4" name="img" type="file" class="file">
                                    <p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过2.0M</p>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="/WEB-INF/views/footer.jsp" %>
</body>

<script src="${base}/js/teacher/info.js"></script>

</html>
